import 'package:fbutton/fbutton.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_chip/config/Comm.dart';
import 'package:flutter_chip/widget/view_checkbox.dart';
import 'package:flutter_chip/widget/widget_drawer.dart';
import 'package:fsuper/fsuper.dart';

import '../widget_period.dart';

class SerialPage extends StatefulWidget {
  @override
  _SerialPageState createState() => _SerialPageState();
}

class _SerialPageState extends State<SerialPage> {
  var _sendController = TextEditingController();
  var _recvController = ScrollController();

  int port = 0;
  int baudRate = 9600;
  int parity = 0;
  int stopBits = 1;
  int dataBits = 8;
  List<int> baudRateList = [
    110,
    300,
    600,
    1200,
    2400,
    4800,
    9600,
    19200,
    38400,
    56000,
    57600,
    115200,
    128000,
    256000
  ];
  List parityList = [
    {'value': 0, 'desc': '无'},
    {'value': 1, 'desc': '奇校验'},
    {'value': 2, 'desc': '偶校验'},
    {'value': 3, 'desc': '1校验'},
    {'value': 4, 'desc': '0校验'}
  ];
  List stopList = [
    {'value': 1, 'desc': '1'},
    {'value': 3, 'desc': '1.5'},
    {'value': 2, 'desc': '2'},
  ];

  String recvData = '';
  int txNum = 0;
  int rxNum = 0;
  bool autoLine = false;
  bool showHex = false;
  bool sendHex = false;
  bool autoSend = false;
  int period = 500;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('串口助手', style: TextStyle(fontSize: 18)),
        backgroundColor: Theme.of(context).canvasColor,
        titleSpacing: 0,
        elevation: 1,
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            SizedBox(height: 10),
            _recvWidget(),
            _sendWidget(),
          ],
        ),
      ),
      endDrawer: CustomDrawer(
        widthPercent: 0.6,
        child: Container(
          padding: EdgeInsets.all(10),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              SizedBox(height: 30),
              FSuper(text: '配置', textColor: Color(0XFF999999)),
              Divider(),
              SizedBox(height: 10),
              Row(
                children: <Widget>[
                  SizedBox(width: 10),
                  FSuper(
                    height: 40,
                    width: 48,
                    text: '端口',
                    textAlignment: Alignment.centerLeft,
                  ),
                  SizedBox(width: 10),
                  _portDropWidget(),
                ],
              ),
              SizedBox(height: 10),
              Row(
                children: <Widget>[
                  SizedBox(width: 10),
                  FSuper(
                    height: 40,
                    width: 48,
                    text: '波特率',
                    textAlignment: Alignment.centerLeft,
                  ),
                  SizedBox(width: 10),
                  _baudRateDropWidget(),
                ],
              ),
              SizedBox(height: 10),
              Row(
                children: <Widget>[
                  SizedBox(width: 10),
                  FSuper(
                    height: 40,
                    width: 48,
                    text: '校验位',
                    textAlignment: Alignment.centerLeft,
                  ),
                  SizedBox(width: 10),
                  _parityDropWidget(),
                ],
              ),
              SizedBox(height: 10),
              Row(
                children: <Widget>[
                  SizedBox(width: 10),
                  FSuper(
                    height: 40,
                    width: 48,
                    text: '数据位',
                    textAlignment: Alignment.centerLeft,
                  ),
                  SizedBox(width: 10),
                  _dataDropWidget(),
                ],
              ),
              SizedBox(height: 10),
              Row(
                children: <Widget>[
                  SizedBox(width: 10),
                  FSuper(
                    height: 40,
                    width: 48,
                    text: '停止位',
                    textAlignment: Alignment.centerLeft,
                  ),
                  SizedBox(width: 10),
                  _stopDropWidget(),
                ],
              ),
              Divider(),
              FSuper(text: '其他', textColor: Color(0XFF999999)),
              Divider(),
              ListTile(
                title: FSuper(
                  text: '帮助',
                  textSize: 18,
                ),
                dense: true,
                trailing: Icon(
                  Icons.keyboard_arrow_right,
                  color: Color(0xffBBBBBB),
                ),
              ),
              Divider(),
            ],
          ),
        ),
      ),
    );
  }

  ///数据接收区
  Widget _recvWidget() {
    return FSuper(
      width: double.infinity,
      height: 300,
      margin: EdgeInsets.only(left: 10, right: 10),
      text: "数据接收区",
      textColor: Colors.grey,
      padding: EdgeInsets.all(6),
      textAlignment: Alignment.topLeft,
      textAlign: TextAlign.left,
      child1Margin: EdgeInsets.only(top: 10),
      backgroundColor: Color(0xffEEEEEE),
      corner: Corner.all(6),
      child1: Container(
        width: Comm.screenWidth - 110,
        height: 216,
        margin: EdgeInsets.only(left: 10, right: 10, top: 20, bottom: 10),
        child: ListView(
          controller: _recvController,
          children: <Widget>[
            Text(recvData),
          ],
        ),
      ),
      child1Alignment: Alignment.centerLeft,
      child2Alignment: Alignment.bottomRight,
      child2: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          FSuper(
            width: 84,
            height: 24,
            text: 'TX：$txNum',
            textAlignment: Alignment.centerLeft,
            padding: EdgeInsets.only(left: 10),
          ),
          FSuper(
            width: 84,
            height: 24,
            text: 'RX：$rxNum',
            textAlignment: Alignment.centerLeft,
            padding: EdgeInsets.only(left: 10),
          ),
          FSuper(
            height: 32,
            width: 76,
            text: "计数清零",
            textSize: 12,
            textAlignment: Alignment.center,
            backgroundColor: Color(0xffDDDDDD),
            corner: Corner.all(6),
            onClick: () {
              setState(() {
                rxNum = 0;
                txNum = 0;
              });
            },
          ),
          Container(child: Divider(), width: 84),
          MyCheckBox("自动换行", autoLine, (value) => autoLine = value),
          SizedBox(height: 6),
          MyCheckBox("HEX显示", showHex, (value) => showHex = value),
          SizedBox(height: 6),
          FSuper(
            height: 32,
            width: 76,
            text: "清除显示",
            textSize: 12,
            textAlignment: Alignment.center,
            backgroundColor: Color(0xffDDDDDD),
            corner: Corner.all(6),
            onClick: () => setState(() => recvData = ''),
          ),
          SizedBox(height: 6),
        ],
      ),
    );
  }

  ///发送数据
  Widget _sendWidget() {
    return FSuper(
      width: double.infinity,
      height: 110,
      text: '数据发送区',
      textColor: Colors.grey,
      backgroundColor: Color(0xFFEEEEEE),
      corner: Corner.all(6),
      textAlignment: Alignment.topLeft,
      margin: EdgeInsets.only(left: 10, right: 10, top: 10),
      padding: EdgeInsets.only(left: 6, top: 6),
      child1Margin: EdgeInsets.only(bottom: 8),
      child1: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          MyCheckBox("HEX发送", sendHex, (value) => sendHex = value),
          MyCheckBox("自动发送", autoSend, (value) => autoSend = value),
          PeriodWidget(period, (period) => period = period),
        ],
      ),
      child2: FSuper(
        width: double.infinity,
        height: 36,
        child1: Container(
          width: Comm.screenWidth - 84,
          height: 36,
          child: TextField(
            controller: _sendController,
            decoration: InputDecoration(
              hintText: "发送数据",
              hintStyle: TextStyle(fontSize: 12),
              contentPadding: EdgeInsets.all(10),
              border: OutlineInputBorder(
                borderSide: BorderSide(),
                borderRadius: BorderRadius.all(Radius.circular(6)),
              ),
            ),
          ),
        ),
        child1Margin: EdgeInsets.only(left: 6),
        child2Margin: EdgeInsets.only(right: 6),
        child1Alignment: Alignment.centerLeft,
        child2Alignment: Alignment.centerRight,
        child2: FButton(
          onPressed: _sendData,
          width: 48,
          height: 36,
          padding: EdgeInsets.zero,
          text: '发送',
          fontSize: 12,
          textColor: Colors.white,
          corner: FButtonCorner.all(4),
          effect: true,
          clickEffect: true,
          color: Theme.of(context).accentColor,
        ),
      ),
      child2Margin: EdgeInsets.only(bottom: 6),
      child2Alignment: Alignment.bottomCenter,
    );
  }

  ///端口号下拉
  Widget _portDropWidget() {
    return FSuper(
      width: 96,
      height: 30,
      strokeWidth: 1,
      strokeColor: Color(0xffAAAAAA),
      child1: DropdownButton(
          underline: Container(height: 0),
          icon: Icon(Icons.keyboard_arrow_down),
          isExpanded: true,
          value: port,
          items: [
            DropdownMenuItem(
              value: 0,
              child: FSuper(text: 'COM1', padding: EdgeInsets.only(left: 10)),
            ),
            DropdownMenuItem(
              value: 1,
              child: FSuper(text: 'COM2', padding: EdgeInsets.only(left: 10)),
            ),
          ],
          onChanged: (value) => setState(() => port = value)),
    );
  }

  ///波特率下拉
  Widget _baudRateDropWidget() {
    List<DropdownMenuItem> tmpWidgets = List();
    baudRateList.forEach((item) {
      tmpWidgets.add(DropdownMenuItem(
        value: item,
        child: FSuper(
          text: '$item',
          padding: EdgeInsets.only(left: 10),
        ),
      ));
    });
    return FSuper(
      width: 96,
      height: 30,
      strokeWidth: 1,
      strokeColor: Color(0xffAAAAAA),
      child1: DropdownButton(
          underline: Container(height: 0),
          icon: Icon(Icons.keyboard_arrow_down),
          isExpanded: true,
          value: baudRate,
          items: tmpWidgets,
          onChanged: (value) => setState(() => baudRate = value)),
    );
  }

  ///校验位下拉
  Widget _parityDropWidget() {
    List<DropdownMenuItem> tmpWidgets = List();
    parityList.forEach((item) {
      tmpWidgets.add(DropdownMenuItem(
        value: item['value'],
        child: FSuper(
          text: item['desc'],
          padding: EdgeInsets.only(left: 10),
        ),
      ));
    });
    return FSuper(
      width: 96,
      height: 30,
      strokeWidth: 1,
      strokeColor: Color(0xffAAAAAA),
      child1: DropdownButton(
          underline: Container(height: 0),
          icon: Icon(Icons.keyboard_arrow_down),
          isExpanded: true,
          value: parity,
          items: tmpWidgets,
          onChanged: (value) => setState(() => parity = value)),
    );
  }

  ///数据位下拉
  Widget _dataDropWidget() {
    List<DropdownMenuItem> tmpWidgets = List();
    [5, 6, 7, 8].forEach((item) {
      tmpWidgets.add(DropdownMenuItem(
        value: item,
        child: FSuper(
          text: '$item',
          padding: EdgeInsets.only(left: 10),
        ),
      ));
    });
    return FSuper(
      width: 96,
      height: 30,
      strokeWidth: 1,
      strokeColor: Color(0xffAAAAAA),
      child1: DropdownButton(
          underline: Container(height: 0),
          icon: Icon(Icons.keyboard_arrow_down),
          isExpanded: true,
          value: dataBits,
          items: tmpWidgets,
          onChanged: (value) => setState(() => dataBits = value)),
    );
  }

  ///停止位下拉
  Widget _stopDropWidget() {
    List<DropdownMenuItem> tmpWidgets = List();
    stopList.forEach((item) {
      tmpWidgets.add(DropdownMenuItem(
        value: item['value'],
        child: FSuper(
          text: item['desc'],
          padding: EdgeInsets.only(left: 10),
        ),
      ));
    });
    return FSuper(
      width: 96,
      height: 30,
      strokeWidth: 1,
      strokeColor: Color(0xffAAAAAA),
      child1: DropdownButton(
          underline: Container(height: 0),
          icon: Icon(Icons.keyboard_arrow_down),
          isExpanded: true,
          value: stopBits,
          items: tmpWidgets,
          onChanged: (value) => setState(() => stopBits = value)),
    );
  }

  void _sendData() {
    print('sendHex=$sendHex,autoLine=$autoLine');
  }
}
